<template>
  <div class="inner">
    <div class="hea">
      <i class="el-icon-arrow-down" @click="change"></i>
      <h2 class="a1" >我的余额</h2>
    </div>
    <div class="balance">
      <p class="a3">我的学习币</p>
      <p class="a4">{{$store.state.money}}.00</p>
        <van-cell  @click="showPopup">充值</van-cell>
        <van-popup 
          closeable 
          close-icon-position="top-left"
          v-model="show"
          :close-on-click-overlay=false>
          <p class="buy">购买人才币</p>
          <van-field placeholder="请输入充值金额" v-model="number" type="number" label="￥"/>
          <div class="kuan">
            <el-empty 
              v-show="!shower"
              image="https://s1.chu0.com/src/img/png/fe/fe8ef85e430a4725a4be68811a778e21.png?imageMogr2/auto-orient/thumbnail/!237x237r/gravity/Center/crop/237x237/quality/85/&e=1735488000&token=1srnZGLKZ0Aqlz6dk7yF4SkiYf4eP-YrEOdM1sob:taS-Kc88CSvWo0WvVNXdeg3BrGQ="
              :image-size="400"
              description="请获取二维码"
            ></el-empty>
            <div v-show="shower" id="qrcode" ref="qrcode"></div>
          </div>
          <button class="but" @click="getEr">获取二维码</button>
        </van-popup>
      <p class="a6"><span>*</span>1学习币等于1元，充值尽显指定价格，不支持退款</p>
    </div>
   
   <div class="chong">
      <section>
          <router-link to="/Deposit">
            <p><i class="iconfont icon-shouji3" style="color:#ff9d1c"></i></p>
            <p>充值记录</p>
          </router-link>
      </section>
      <section>
          <router-link to="/Consume">
            <p><i class="iconfont icon-xiaofeijilu" style="color:#fff"></i></p>
            <p>消费记录</p>
          </router-link>
      </section>
   </div>
  </div>
</template>

<script>
import {getUrl,getStatus,addChong} from '@/api'
import QRCode from "qrcodejs2"
export default {
  components:{QRCode},
  data() {
    return {
      show: false,
      shower:false,
      number:'',
      list: [
        {
          id: "1",
          price: 100,
          time: "2021-12-19",
          timeNow: "21:54:32",
        },
        {
          id: "2",
          price: 30,
          time: "2021-12-19",
          timeNow: "21:54:32",
        },
      ],
    };
  },
  methods: {
    getEr(){
      let id =this.$store.state.id
      getUrl(id).then(res => {
        this.shower = true
        new QRCode("qrcode",{
          width:400,
          height:400,
          text:res.data.data
        })
      })
      var i = setInterval(()=>{
        getStatus(id).then(res => {
          if(res.data.data === "2"){
            let value = this.number
            addChong({uid:id,money:value}).then(res => {
              if(res.data.ststus = 1){
                if(value != 0){
                  this.show = false
                  this.$toast({
                    message:"充值成功",
                    icon: 'success',
                    duration:1000
                  })
                  clearInterval(i)
                  this.$store.dispatch("changeMoney",res.data.data.userMoney)
                  location.reload();
                }else{
                  clearInterval(i)
                  this.show = false
                  this.$toast({
                    message:`${res.data.msg}`,
                    icon: 'cross',
                    duration:1000
                  })
                  location.reload();
                }
              }
            })
          }
        })
      },3000)
    },
    showPopup() {
      this.show = true;
    },
    change() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="scss">
.chong{
  display: flex;
  margin-top: 2vh;
}
section:nth-child(1){
    width: 14vw;
    margin: 0 3vw;
    text-align: center;
    margin-left: 28vw;
    a{
      >p:nth-child(1){
        background: #ffe8cd;
        border-radius: 60%;
        padding: 2vw 0;
        margin-bottom: 2vw;
        >i{
            font-size: 10vw;
            color: #ff7e00;
        }
    }
    >p:nth-child(2){
        font-size: 3.3vw;
        font-family: '应用字体 Regular', '应用字体';
        color: #666;
    }
    }
    
}
section:nth-child(2){
    width: 14vw;
    margin: 0 3vw;
    text-align: center;
    margin-left: 15vw;
    a{
      >p:nth-child(1){
        background: #a6cb50;
        border-radius: 60%;
        padding: 1vw 0;
        margin-bottom: 2vw;
        >i{
            font-size: 12vw;
            color: #ff7e00;
        }
    }
    >p:nth-child(2){
        font-size: 3.3vw;
        font-family: '应用字体 Regular', '应用字体';
        color: #666;
    }
    }
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 80vw;
    height: 80vw;
    background-color: #fff;
  }
  .van-overlay{
    z-index: 2;
  }
  .hea{
    background: #fff;
  }
.inner{
  height: 100vh;
  // overflow-y: hidden;
  margin-bottom: 10vh;
  width: 100vw;
  background: rgba(248, 248, 248, 1);
}
.balance {
  background: #fff;
  margin-top: 2.5vh;
  width: 94vw;
  margin-left: 3vw;
  border-radius: 5vw;
  overflow: hidden;
}
.el-icon-arrow-down {
  transform: rotate(90deg);
  margin-top: 0;
  margin-left: 2vw;
  position: absolute;
  /* top: 200px; */
  font-size: 5vw;
  left: 0vw;
  height: 5vh;
  color: black;
  font-weight: bold;
}
.a1 {
  width: 100vw;
  display: block;
  font-size: 4vw;
  font-weight: inherit;
  text-align: center;
  line-height: 6.5vh;
}
.a2 {
  width: 100vw;
  height: 2vh;
  margin-top: 1vh;
  background: rgb(247, 245, 245);
}
.a3 {
  text-align: center;
  font-weight: bold;
  margin-top: 8vw;
  font-size: 4.5vw;
}
.a4 {
  text-align: center;
  font-size: 13vw;
  font-weight: bold;
  margin-top: 2vh;
  color: #FF5F1C;
}
.van-cell__value {
  color: #fff;
  border: none;
  text-align: center;
  width: 84vw;
  height: 6vh;
  background: orange;
  line-height: 6vh;
  border-radius: 6vw;
  font-size: 5vw;
}
.van-popup{
  width: 80vw;
  height: 95vw;
}
.van-popup--center{
  top: 45%;
}
.but{
  width: 30vw;
  height: 10vw;
  font-size: 3.5vw;
  background: rgba(6, 194, 95, 1);
  border: none;
  color: #fff;
  margin-left: 25vw;
  margin-top: 1vh;
  border-radius: 5vw;
}
.doc{
  font-size: 4vw;
}
.a6 {
  text-align: center;
  font-size: 3.5vw;
  font-family: '应用字体 Regular', '应用字体';
  color: #999;
  margin: 3vh 0;
  line-height: 3vh;
  span{
    color: red;
  }
}
.a7 {
  width: 15vw;
  height: 8vh;
  margin-left: 27vw;
  margin-top: 3vh;
}
.a8 {
  margin-left: 26vw;
  font-size: 4vw;
}
.a9 {
  color: #000;
  margin-left: 2vw;
}
.nav {
  float: left;
}
.b1 {
  width: 15vw;
  height: 8vh;
  margin-left: 15vw;
  margin-top: 3vh;
}
.b2 {
  margin-left: 56vw;
  font-size: 4vw;
}
.b3 {
  margin-left: 2.2vw;
  color: #000;
}
.chongzhi{
  width: 40vw;
  height: 10vw;
  font-size: 4vw;
}
.van-cell{
  width: 86%;
  margin-left: 7vw;
  // margin-top: 10vh;
  align-items: center;
}
.buy{
  font-size: 4.5vw;
  text-align: center;
  margin-top: 10vw;
  color: #333;
  font-weight: bold;
}
.kuan{
  border: 1px solid #06c25f;
  border-radius: 5vw;
  width: 500px;
  height: 500px;
  margin-left: 14.5vw;
}
#qrcode {
  margin: 0 auto;
  margin-top: 50px;
  margin-left: 50px;
}
</style>
<style>
.el-empty__description p{
  font-size: 4vw;
  margin: -23px;
}
.van-toast{
    width: 17vh;
    height: 17vh;
}
.van-toast__icon{
    font-size: 18vw;
}
.van-toast__text{
    font-size: 3vw;
}
  .van-popup__close-icon--top-left{
    left: 30px;
  }
  .van-popup__close-icon{
    font-size: 5vw;
  }
  .van-field__control{
    text-indent: 10vw;
    font-size: 5vw;
    padding: 1vw;
    border-bottom: 1px solid #999;
  }
  .van-field__label{
    text-align: right;
    font-size: 8vw;
    color: #000;
    width: 10vw;
    position: absolute;
    top: 30px;
    left: 0;
  }
  .van-popup .van-field {
    width: 90%;
    margin-left: 20px;
    margin-top: 2vw;
    margin-bottom: 2vw;
  }
</style>